<template>

  <view style="background-color: #fff;">
    <uni-row>
      <view class="select-container">
        <view class="select-input uni-input-wrapper">
          <uni-row>
            <uni-col :span="20">
              <input v-model="messageParams.equipmentPhouseCode" class="uni-input" placeholder="请输入设备编码"
                     @input="filterOptions"/>
            </uni-col>
            <uni-col :span="3">
              <text v-if="showClearIcon" class="uni-icon" @click="clearIcon">
                <uni-icons size="20" type="closeempty"></uni-icons>
              </text>
            </uni-col>
          </uni-row>
        </view>
        <view v-if="showOptions" class="select-dropdown ">
          <view v-for="item in filteredOptions" :key="item.equipmentPhouseCode" class="select-dropdown-child"
                @click="item.equipmentPhouseCode !== '没有匹配数据~~' && selectOption(item)">
            {{ item.equipmentPhouseCode }}
          </view>

        </view>
      </view>
    </uni-row>
    <uni-row class="center-child">
      <uni-col :span="20">
        <uni-swiper-dot class="uni-swiper-dot-box" field="content" mode="default">
          <swiper class="swiper-box" indicator-dots="true" style="width: 100%; height: 300px; ">
            <swiper-item v-for="(item, index) in gasList" :key="index">
              <view class="swiper-item">
                <uni-card :body-style="{ padding: '0px' }" class="parent-icon" shadow="hover">
                  <i v-if="item.wenshiState==='1'" class="uni-icon-success green-icon" title="运行"
                     @click.stop="icoeUp(item)"></i>
                  <i v-else-if="item.wenshiState==='2'" class="uni-icon-error rea-icon" title="关闭"
                     @click.stop="icoeUp(item)"></i>

                  <svg class="icon" height="100" p-id="11124" t="1708426299061" version="1.1"
                       viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M484.917 1023.771c-74.506 0-144.44-29.025-197.12-81.705-52.68-52.68-81.706-122.729-81.706-197.12 0-61.822 19.77-120.33 57.251-169.239 32.682-42.738 77.706-75.534 128.1-93.475V94.504C391.442 42.395 433.837 0 485.946 0c52.223 0 94.618 42.395 94.618 94.504v85.019h-45.71v-85.02c0-26.968-21.94-48.794-48.794-48.794-26.968 0-48.795 21.94-48.795 48.795v421.553l-16.57 4.685c-47.65 13.598-90.618 42.967-121.014 82.62-31.311 40.909-47.88 89.818-47.88 141.47 0 128.556 104.56 233.116 233.116 233.116s233.117-104.56 233.117-233.117c0-51.308-16.34-99.874-47.195-140.67-29.94-39.424-72.334-68.906-119.53-82.848l-16.454-4.685V222.032h45.709v261c49.823 18.283 94.39 51.08 126.614 93.704 36.91 48.794 56.451 106.96 56.451 168.324 0 74.506-29.025 144.44-81.705 197.12-52.566 52.68-122.5 81.591-197.007 81.591z"
                        p-id="11125"></path>
                    <path d="M461.474 637.236l1.137-310.594 45.71 0.167-1.138 310.594z"
                          p-id="11126">
                    </path>
                    <path
                        d="M484.917 884.358c-71.877 0-130.27-58.393-130.27-130.27s58.393-130.272 130.27-130.272 130.271 58.394 130.271 130.271-58.393 130.271-130.27 130.271z m0-214.833c-46.623 0-84.562 37.939-84.562 84.562s37.939 84.562 84.562 84.562 84.562-37.938 84.562-84.562-37.938-84.562-84.562-84.562z m310.594-573.65H654.156c-12.57 0-22.855-10.285-22.855-22.855s10.285-22.854 22.855-22.854H795.51c12.57 0 22.855 10.284 22.855 22.854S808.08 95.875 795.51 95.875z m-91.418 122.272h-49.937c-12.57 0-22.855-10.284-22.855-22.855s10.285-22.854 22.855-22.854h49.937c12.57 0 22.854 10.284 22.854 22.854s-10.284 22.855-22.854 22.855zM795.51 340.42H654.156c-12.57 0-22.855-10.284-22.855-22.854s10.285-22.855 22.855-22.855H795.51c12.57 0 22.855 10.285 22.855 22.855s-10.285 22.854-22.855 22.854z m-91.418 122.272h-49.937c-12.57 0-22.855-10.284-22.855-22.854s10.285-22.855 22.855-22.855h49.937c12.57 0 22.854 10.285 22.854 22.855s-10.284 22.854-22.854 22.854z"
                        p-id="11127"></path>
                  </svg>


                  <view class="card-content" @click.stop="tableQuery(item)">
                    <uni-row class="card-row">
                      <uni-col :span="8" class="row-item">设备品牌</uni-col>
                      <uni-col :span="8" class="row-item">设备材质</uni-col>
                      <uni-col :span="8" class="row-item">栏舍编码</uni-col>
                    </uni-row>
                    <uni-row>
                      <uni-col :span="8" class="row-item">{{ item.wenshiBrand }}</uni-col>
                      <uni-col :span="8" class="row-item">{{ item.wenshiMaterial }}</uni-col>
                      <uni-col :span="8" class="row-item">{{ item.phouseCode }}</uni-col>
                    </uni-row>
                  </view>
                </uni-card>
              </view>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>

      </uni-col>
    </uni-row>

    <uni-row class="center-child">
      <uni-col :span="22">
        <view>
          <view class="uni-container">
            <view class="table-header">
              <!-- 表头 -->
              <view class="header-row" style="width: 100%;">
                <view class="header-cell" style="width: 30%;">栏舍编码</view>
                <view class="header-cell" style="width: 20%">温度</view>
                <view class="header-cell" style="width: 20%">湿度</view>
                <view class="header-cell" style="width: 30%">时间</view>
              </view>
            </view>
            <scroll-view class="table-body" scroll-y="true" style=" width: 100%; height: 150px;">
              <!-- 表格数据 -->
              <view v-for="(item, index) in messageList" :key="index" class="body-row">
                <view class="body-cell msg-txt" style="width: 30%;">
                  {{ item.equipmentPhouseCode }}
                </view>
                <view class="body-cell msg-txt" style="width: 20%;">
                  {{ item.equipmentTemperature }}
                </view>
                <view class="body-cell msg-txt" style="width: 20%;">
                  {{ item.equipmentHumidity }}
                </view>
                <view class="body-cell msg-txt" style="width: 30%;">
                  {{ item.creationDate.slice(5, 16) }}
                </view>
              </view>
            </scroll-view>
          </view>
        </view>

      </uni-col>

    </uni-row>
    <uni-row>
      <view class="chart-container">
        <!-- #ifdef APP-PLUS || H5 -->
        <view id="echarts" ref="echarts" :change:prop="echarts.updateEcharts" class="echarts"
              style="height: 300px; width: 100%;">
        </view>
        <!-- #endif -->
        <!-- #ifndef APP-PLUS || H5 -->
        <view>非 APP、H5 环境不支持</view>
        <!-- #endif -->
      </view>
    </uni-row>
  </view>

</template>

<script>
import {addWS, delWS, editWS, listWS, listWSById} from "@/api/hmy/ws"
import {findPhouseCode, findPhouseCodeAll, listEquipment} from "@/api/hmy/equipment"

export default {
  name: "WS",
  dicts: ['sys_normal_disable', 'hmy_gas_state', 'hmy_gas_type', 'hmy_park_type'],
  data() {
    return {
      showClearIcon: false,
      filteredOptions: [], // 过滤后的选项列表
      showOptions: false, // 是否显示下拉列表
      parkCodeList: [],
      parkList: [],
      messageList: [],
      messageParams: {
        pageNum: 1,
        pageSize: 999,
        equipmentPhouseType: "",
        equipmentPhouseCode: ""
      },
      contextMenuVisible: false,
      contextMenuTop: 0,
      contextMenuLeft: 0,
      selectedContextItem: null,

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 气体检测仪表格数据
      gasList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 999,
        wenshiBrand: undefined,
        wenshiType: undefined,
        beginTime: undefined,
        endTime: undefined
      },
      // 表单参数
      form: {},
      rules: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    clearIcon: function () {
      this.messageParams.equipmentPhouseCode = '';
      this.showClearIcon = false;
      this.tableQuery()
    },
    filterOptions() {
      if (this.messageParams.equipmentPhouseCode.trim() === '') {
        this.filteredOptions = [];
        this.showOptions = false;
      } else {
        this.showClearIcon = true;
        this.filteredOptions = this.parkList.filter((item) =>
            item.equipmentPhouseCode.includes(this.messageParams.equipmentPhouseCode)
        );
        if (this.filteredOptions.length === 0) {
          // 如果过滤后的结果为空，手动添加一条数据
          this.filteredOptions.push({
            equipmentPhouseCode: '没有匹配数据~~'
          });
        }
        this.showOptions = true;
      }
    },
    selectOption(item) {
      this.messageParams.equipmentPhouseCode = item.equipmentPhouseCode; // 更新输入框的值
      this.showOptions = false;
      this.tableQuery()
    },
    tableQuery(item) {
      if (item != null) {
        if (item.phouseCode != null) {
          this.messageParams.equipmentPhouseCode = item.phouseCode
        }
      }
      listEquipment(this.messageParams).then(response => {
        this.messageList = response.rows;
        this.initChart();
      });
    },
    icoeUp(d) {
      if (d.wenshiState === '1') {
        d.wenshiState = '2'
      } else {
        d.wenshiState = '1'
      }
      editWS({
        "wenshiState": d.wenshiState,
        "wenshiId": d.wenshiId
      }).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },
    showDetails(item) {
      listWSById(item.wenshiId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看气体检测仪信息";
      });
    },

    hideContextMenu() {
      this.contextMenuVisible = false;
    },
    /** 查询气体检测仪列表 */
    getList() {
      this.loading = true;
      /** 查询气体检测仪列表 */
      this.queryParams.beginTime = this.dateRange[0]
      this.queryParams.endTime = this.dateRange[1]
      listWS(this.queryParams).then(res => {
        this.gasList = res.rows
        this.total = res.total;
      });
      /** 查询环境信息 */
      listEquipment(this.messageParams).then(response => {
        this.messageList = response.rows;
        console.log("表格树")
        console.log(this.messageList)
        this.initChart();

      });
      /** 栏舍下拉选择 */
      findPhouseCode().then(response => {
        this.parkList = response.data;
        console.log(this.parkList)

        this.loading = false;
      });
    },


    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        wenshiId: undefined,
        wenshiType: undefined,
        wenshiBrand: undefined,
        wenshiMaterial: undefined,
        wenshiTemperatureRange: undefined,
        wenshiHumidityRange: undefined,
        wenshiTemperaturePrecision: undefined,
        wenshiHumidityPrecision: undefined,
        wenshiProduction: undefined,
        wenshiState: "1",
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.wenshiId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },


    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备";
      findPhouseCodeAll().then(response => {
        this.parkCodeList = response.data;
        this.parkCodeList = this.filteredParkCodeList()
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const item = this.selectedContextItem;
      listWSById(item.wenshiId).then(res => {
        this.form = res.data;
        this.open = true;
        this.title = "修改设备";
      })
      this.hideContextMenu();
    },

    /** 提交按钮 */
    submitForm: function () {
      if (this.form.wenshiId != undefined) {
        editWS(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        addWS(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const item = this.selectedContextItem;
      this.$modal.confirm('是否确认删除设备编号为"' + item.wenshiId + '"的数据项？').then(function () {
        return delWS(item.wenshiId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
      this.hideContextMenu();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/role/export', {
        ...this.queryParams
      }, `role_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<script lang="renderjs" module="echarts">
console.log("=======");
let myChart
export default {
  mounted() {
    if (typeof window.echarts === 'function') {
      this.initChart()
    } else {
      // 动态引入较大类库避免影响页面展示
      const script = document.createElement('script')
      // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
      script.src = 'static/echarts.js'
      script.onload = this.initChart.bind(this)
      document.head.appendChild(script)
    }
  },
  methods: {
    initChart() {
      console.log("=====11");
      myChart = echarts.init(this.$refs.echarts)
      const option = {
        title: {
          text: '温度和湿度',
          left: 'center',
          textStyle: {
            fontSize: 12 // 你可以设置为你需要的字体大小
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          }
        },
        legend: {
          data: ['温度', '湿度'],
          left: 10
        },
        /* 功能 */
        toolbox: {
          top: 20,
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {
              readOnly: false
            },
            magicType: {
              type: ['line', 'bar']
            },
            restore: {},
            saveAsImage: {}
          }
        },
        axisPointer: {
          link: {
            xAxisIndex: 'all'
          }
        },
        dataZoom: [{

            type: 'inside',
            show: true,
            realtime: true,
            start: 0,
            end: 30,
            xAxisIndex: [0, 1], // 控制两个 xAxis 的 dataZoom
            handleSize: '80%', // 设置滑动手柄的大小，例如设置为80%
            // 根据需要启用或禁用缩放和平移
            zoomOnMouseWheel: 'shift', // 只有在按下 shift 的时候才能使用鼠标滚轮缩放
            moveOnMouseMove: true, // 可以通过鼠标拖动来平移
            moveOnMouseWheel: true // 可以通过鼠标滚轮来平移
          },
          {

            type: 'inside',
            realtime: true,
            start: 0,
            end: 50,
            xAxisIndex: [0, 1], // 控制两个 xAxis 的 dataZoom
            handleSize: '80%', // 设置滑动手柄的大小，例如设置为80%
            // 根据需要启用或禁用缩放和平移
            zoomOnMouseWheel: 'shift', // 只有在按下 shift 的时候才能使用鼠标滚轮缩放
            moveOnMouseMove: true, // 可以通过鼠标拖动来平移
            moveOnMouseWheel: true // 可以通过鼠标滚轮来平移

          }
        ],
        grid: [{
            left: 60,
            right: 50,
            height: '35%'
          },
          {
            left: 60,
            right: 50,
            top: '55%',
            height: '35%'
          }
        ],
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              onZero: true
            },
            position: 'bottom',
            data: this.messageList.map(item => item.creationDate) // 第一个图表的 X 轴数据
          },
          {
            show: false,
            gridIndex: 1, // 指定属于第二个 grid
            type: 'category',
            boundaryGap: false,
            axisLine: {
              onZero: true
            },
            data: this.messageList.map(item => item.creationDate) // 第二个图表的 X 轴数据

          }
        ],
        yAxis: [{
            name: '温度(℃)',
            type: 'value',

          },
          {
            gridIndex: 1, // 指定属于第二个 grid
            name: '湿度(%)',
            type: 'value',
            inverse: true
          }
        ],
        series: this.seriesData() // 确保这个方法返回的是两个系列的数据
      };
      console.log("tubiao1");
      console.log(this.seriesData());
      // 观测更新的数据在 view 层可以直接访问到
      myChart.setOption(option)
    },
    seriesData() {
      let series = [];
      this.parkList.forEach(cloud => {
        // 筛选出具有相同设备站房代码的messageList项
        const messageItems = this.messageList.filter(item => item.equipmentPhouseCode === cloud
          .equipmentPhouseCode);
        // 生成温度数据系列
        const temperatureSeries = {
          name: '温度 - ' + cloud.equipmentPhouseCode,
          type: 'line',
          symbolSize: 8,
          data: messageItems.map(item => item.equipmentTemperature)
        };

        // 生成湿度数据系列
        const humiditySeries = {
          name: '湿度 - ' + cloud.equipmentPhouseCode,
          type: 'line',
          symbolSize: 8,
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: messageItems.map(item => item.equipmentHumidity)
        };

        // 将生成的温度和湿度系列添加到系列数组中
        series.push(temperatureSeries);
        series.push(humiditySeries);
      });
      return series;
    },

    updateEcharts(newValue, oldValue, ownerInstance, instance) {
      // 监听 service 层数据变更
      myChart.setOption(newValue)
    },
    onClick(event, ownerInstance) {
      // 调用 service 层的方法
      ownerInstance.callMethod('onViewClick', {
        test: 'test'
      })
    }
  }
}
</script>

<!--添加样式-->
<style scoped>
/* 样式根据您的需求进行调整 */
.select-container {
  position: relative;
  padding: 5px 40px;
  background-color: blue;
}

.select-input {
  border-radius: 20px;
  /* 设置圆角半径为5px */
  border: 1px solid #ccc;
  /* 添加边框样式 */
  padding: 5px;
  /* 添加内边距 */
  background-color: #fff;
}

.select-dropdown {
  width: 80%;
  position: absolute;
  top: 100%;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.select-dropdown-child {
  padding: 5px 40px;
  cursor: pointer;
}

/* 子容器居中 */
.center-child {
  display: flex;
  justify-content: center;

}

/* CSS样式 */
.table-header {
  /* 固定表头样式 */
}

.header-row {
  display: flex;
  font-size: 25 rpx;
}

.body-row {
  display: flex;
  font-size: 25 rpx;
}

.header-cell {
  text-align: center;
  border-bottom: 1px solid #ccc;
}

.body-cell {
  text-align: center;
  padding: 10 rpx 0;
  border-bottom: 1px solid #ccc;
}

/* CSS样式 */
.body-row:nth-child(odd) .body-cell {
  background-color: #f2f2f2;
  /* 灰色背景 */
}

.table-body {
  /* 表格内容区域滚动样式 */
}

.table-scroll {
  max-height: 200px;
  /* 你想要的最大高度 */
  overflow-y: auto;
  /* 超出部分显示滚动条 */

}

.card-content {
  padding: 14px;
  background-color: #f2f2f2;
}

.card-row {
  margin-bottom: 5px;
  border-bottom: 1px solid #8f939c;
}

.row-item {
  text-align: center;
  /* 其他必要的样式 */
}

.msg-txt {
  text-align: center;
  font-size: 20 rpx;
}

.parent-icon {
  position: relative;
}

.green-icon {
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  color: green;
  z-index: 9;
}

.rea-icon {
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  color: red;
  z-index: 9;
}
</style>